<template>
  <footer>
    <router-link to="/home" :class="{ active: $route.path === '/home' }"
      ><i class="iconfont icon-shouye"></i><span>首页</span></router-link
    >
    <router-link to="/category" :class="{ active: $route.path === '/category' }"
      ><i class="iconfont icon-fenlei"></i><span>分类</span></router-link
    >
    <router-link to="/shopcart" :class="{ active: $route.path === '/shopcart' }"
      ><Badge :content="$store.state.cartCount"
        ><i class="iconfont icon-gouwuchekong"></i
      ></Badge>
      <span>购物车</span></router-link
    >
    <router-link to="/profile" :class="{ active: $route.path === '/profile' }"
      ><i class="iconfont icon-wode"></i><span>我的</span></router-link
    >
  </footer>
</template>

<script>
import { Badge } from 'vant'
export default {
  name: 'AppFooter',
  components: { Badge }

}
</script>

<style scoped lang="less">
footer {
  z-index: 999;
  display: flex;
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0;
  width: 100vw;
  padding: 0 20px;
  background-color: #eee;
  box-shadow: 0 -3px rgba(0, 0, 0, 0.1);
  .active {
    color: var(--color-tint);
  }
  > a {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    flex: 1;
    height: 60px;
    .iconfont {
      font-size: 20px;
    }
    img {
      width: 20px;
    }
    span {
      line-height: 20px;
    }
  }
}
</style>
